<template>
	<view class="content">
		<view>
			<up-swiper :list="banners" height="180px" indicator indicatorMode="line" circular
				@click="handleSwiperClick"></up-swiper>
		</view>

		<!--教务管理-->
		<view class="container">
			<view class="title">教务管理</view>
			<!--工作快捷导航-->
			<view class="mainnavi-wraper">
				<up-grid col="4" @click="handleGridClick">
					<up-grid-item v-for="(item,index) in modules.main" :key="index">
						<view>
							<up-image :src="item.icon" width="45px" height="45px"></up-image>
							<view style="text-align: center;" class="grid-text"><text>{{item.title}}</text></view>
						</view>
					</up-grid-item>
				</up-grid>
			</view>

			<!--二级导航菜单-->
			<view class="subnavi-wraper">
				<up-grid col="4">
					<up-grid-item v-for="(item,index) in modules.subs" :key="index">
						<view
							style="margin-bottom: 10px; display: flex; flex-direction:column; justify-content: center;align-items: center">
							<view style="text-align: center;"><up-image :src="item.icon" width="35px"
									height="35px"></up-image></view>
							<view style="text-align: center;" class="grid-text"><text>{{item.title}}</text></view>
						</view>
					</up-grid-item>
				</up-grid>
			</view>
		</view>



		<view class="container" style="box-sizing: border-box;  padding-bottom:15px;">
			<view class="title">代办事项</view>
			<view style="border: 1px solid #EAEAEA;">
				<up-grid col="3" :border="true">
					<up-grid-item>
						<view style="color:#FF0000;font-weight: bold;font-size:14px; padding: 10px;">0</view>
						<text style="padding-bottom: 10px;">未完成点名</text>
					</up-grid-item>
					<up-grid-item>
						<view style="color:#FF0000;font-weight: bold;font-size:14px; padding: 10px;">0</view>
						<text style="padding-bottom: 10px;">无结算点名</text>
					</up-grid-item>
					<up-grid-item>
						<view style="color:#FF0000;font-weight: bold;font-size:14px; padding: 10px;">0</view>
						<text style="padding-bottom: 10px;">欠费学员</text>
					</up-grid-item>
					<up-grid-item>
						<view style="color:#FF0000;font-weight: bold;font-size:14px; padding: 10px;">0</view>
						<text style="padding-bottom: 10px;">将到期课费包</text>
					</up-grid-item>
					<up-grid-item>
						<view style="color:#FF0000;font-weight: bold;font-size:14px; padding: 10px;">0</view>
						<text style="padding-bottom: 10px;">无课费包学员</text>
					</up-grid-item>
					<up-grid-item>
						<view style="color:#FF0000;font-weight: bold;font-size:14px; padding: 10px;">0</view>
						<text style="padding-bottom: 10px;">无排课学员</text>
					</up-grid-item>
				</up-grid>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				baseList: [{
						name: 'photo',
						title: '图片'
					},
					{
						name: 'lock',
						title: '锁头'
					},
					{
						name: 'star',
						title: '星星'
					},
				],
				banners: ['https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png',
					'https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png',
					'https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png'
				],
				modules: {
					main: [{
							icon: "/static/icons/icon_student.png",
							title: "学员"
						},
						{
							icon: "/static/icons/icon_class.png",
							title: "班级"
						},
						{
							icon: "/static/icons/icon_course.png",
							title: "课程"
						},
						{
							icon: "/static/icons/icon_timetable.png",
							title: "课表"
						},
					],
					subs: [{
							icon: "/static/icons/icon_weixiao.png",
							title: "微校"
						},
						{
							icon: "/static/icons/icon_yixiangxueyuan.png",
							title: "意向学员"
						},

						{
							icon: "/static/icons/icon_shiting.png",
							title: "试听"
						},
						{
							icon: "/static/icons/icon_baomingxufei.png",
							title: "报名续费"
						},
						{
							icon: "/static/icons/icon_dianming.png",
							title: "上课点名"
						},
						{
							icon: "/static/icons/icon_shangkejilu.png",
							title: "上课记录"
						},
						{
							icon: "/static/icons/icon_order.png",
							title: "订单"
						},
						{
							icon: "/static/icons/icon_more.png",
							title: "更多"
						},
					]
				}
			}
		},
		onLoad() {

		},
		methods: {
			handleSwiperClick(index) {
			    this.common.gotoPage("/pages/course/index");
			},
			handleGridClick(index) {
				var module = this.modules.main[index];
				switch (module.title) {
					case '课程':
						uni.navigateTo({
							url:"/pages/course/index"
						})
						break;
				}
				console.log(module);
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		height: 100vh;
		flex-direction: column;
		background-color: #eaeaea;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.mainnavi-wraper {
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.subnavi-wraper {
		border: 1px solid #f3f3f3;
		border-radius: 15px;
		background-color: #fff;
		padding: 18px;
		padding-bottom: 15px;
	}
</style>